<template>
	<screen-page title="质检看板">
		<div class="quality-inspection-container">
			<div class="divider"></div>
			<div class="flex-block flex-block-grow3">
				<screen-block title="待质检">
					<module1 :data-source="listA" v-if="loaded" />
				</screen-block>
			</div>
			<div class="divider"></div>
			<div class="flex-block flex-block-grow5">
				<screen-block title="质检结果">
					<module2 :data-source="listB" v-if="loaded" />
				</screen-block>
			</div>
			<div class="divider"></div>
			<div class="flex-block flex-block-grow2">
				<screen-block title="近一个月供应商合格率">
					<module3 :data-source="listC" v-if="loaded" />
				</screen-block>
			</div>
			<div class="divider"></div>	
		</div>
	</screen-page>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import AutoScroll from '@/components/AutoScroll.vue'
import Module1 from './modules/QualityInspectionModule1.vue'
import Module2 from './modules/QualityInspectionModule2.vue'
import Module3 from './modules/QualityInspectionModule3.vue'

const $config = inject('$config')
const $api = inject('$api')

let interval = null;

const listA = ref([])
const listB = ref([])
const listC = ref([])
const loaded = ref(false)

const getData = function(){
	loaded.value = false
	Promise.all([
		$api.get('ToBeQuality',{},{block:'qb'}),
		$api.get('QualityResults',{},{block:'qb'}),
		$api.get('SupplierPassRate',{},{block:'qb'})
	]).then(response=>{
		listA.value = response[0] || []
		listB.value = response[1] || []
		listC.value = (response[2] || []).map((obj)=>{
			obj.passRate = obj.passRate?(Number((obj.passRate*100).toFixed(2))+'%'):'0%'
			return obj
		})
		loaded.value = true
	}).catch(()=>{
		loaded.value = true
	})
}

const createInterval = function(){
	interval = window.setInterval(getData,$config.base.screen.qualityInspection.intervalTime)
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style lang="scss" scoped>
.quality-inspection-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	.divider{
		width: 10px;
		flex-shrink: 0;
	}
	.flex-block{
		width: 1px;
	}
	.flex-block-grow1{
		flex-grow: 1;
	}
	.flex-block-grow2{
		flex-grow: 2;
	}
	.flex-block-grow3{
		flex-grow: 3;
	}
	.flex-block-grow5{
		flex-grow: 5;
	}
}
</style>